//每个页面最外层的div类--示例--配置管理页面
.container {
    border-radius: 4px;
    padding: 16px;
}

.containerForm {
    padding: 10px;
    padding-bottom: 0px;
}

.min-container {
    min-height: calc(100vh - 130px)
}

//多个container时，设置间隔
.another-container {
    margin-top: 16px;
}

//页面头部容器间距--示例--消息中心头部
.head-title-container {
    padding: 0px 16px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 500;
}

.containers {
    padding: 0px;
    color: rgba(0, 0, 0, 0.65);
}

//页面头部样式--示例--配置管理页面头部(平台头部配置)
.head-title {
    font-size: 18px;
    font-weight: 600;
    margin: 5px 0;
}

//备注信息提示样式--示例--配置管理页面
.prompt-info {
    font-size: 12px;
}

//信息提示样式--类似副标题----示例--完善企业信息页面
.prompt-info-h2 {
    font-size: 14px;
}

//底部边框线--示例--页面title底边框线(配置管理页面)
.bottom-border {
    padding-bottom: 15px;
}

//详情页：内容部分字体加粗--示例--企业信息
.el-form-item-span {
    font-weight: 700;
}

//一些垂直居中的元素--示例--小图标，文字
i {
    vertical-align: middle !important;
}

// span{
//     vertical-align: middle;
// }

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0px;
    padding: 0px;
}


//自定义校验文字行高
.validate-line-height {
    line-height: 20px;
}


//顶部title--PageHeader 页头行高
.top-return {
    height: 54px;
    line-height: 54px;
    border-radius: 4px 4px 0 0;
    padding: 0 16px 0 32px;
    font-weight: 500;

    //重置PageHeader 页头行高
    .el-page-header {
        line-height: 54px;
    }

    //箭头
    .el-page-header__left .el-icon-back {
        font-size: 16px;
    }

    //内容
    .el-page-header__content {
        font-size: 16px;
    }
}

//顶部title
.containerTop {
    height: 54px;
    line-height: 54px;
    border-radius: 4px 4px 0 0;
    padding: 0 16px 0 32px;
    font-weight: 800;
    font-size: 16px;
}

//顶部title下边距 --证书申请--基本信息填写
.containerTop-botmargin {
    margin-bottom: 16px;
}

//当title后面有副标题时，距离title左边距 --证书申请--材料上传
.containerTop-leftmargin {
    margin-left: 10px;
}

//头部原因展示样式--只有内容展示
.why-div {
    border-radius: 4px;
    padding: 16px 16px;
    margin-top: 20px;

    .why-icon-div {
        vertical-align: top;
        float: left;
        width: 25px;
    }

    .why-content {
        margin-left: 25px;
    }

    .why-line-height {
        line-height: 25px;
    }
}

//头部原因展示样式--有按钮展示
.why-status {
    height: 68px;

    .why-icon-status {
        line-height: 34px;
    }

    .why-line-height-status {
        line-height: 36px;
    }
}

//头部原因展示样式--左侧上下两行文字，右侧有按钮展示布局
.why-content-flex {
    .why-conten-left {
        display: inline-block;
        float: left;
    }

    .why-conten-right {
        text-align: right;
    }
}


//文字超出一行引号展示
.line-clamp {
    //overflow: hidden;
    //text-overflow: ellipsis;
    //display: -webkit-box;
    //-webkit-line-clamp: 1; //（希望显示N行-webkit-line-clamp的变为N）
    //-webkit-box-orient: vertical;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

//表单行内的忘记密码链接样式
.forget-password-txt {
    margin-left: 10px;
    cursor: pointer;
}


//底部悬浮固定的提交条样式 ---示例--证书申请页面
.spc {
    margin-bottom: 89px;
}

.footer {
    width: calc(100% - 64px);
    left: 64px;
    height: 72px;
    line-height: 72px;
    box-shadow: 0px -8px 20px 0px rgba(0, 0, 0, 0.04);
    text-align: center;
    z-index: 1;
    position: fixed;
    bottom: 0;
}

.footers {
    left: 220px;
    width: calc(100% - 220px);
}

//详情页卡片列表显示

.content-div {
    padding: 0 16px;

    .information {

        //   padding: 16px 0px 16px 16px;
        .el-rows {
            display: block;
            margin-bottom: 20px;

            .financing-list-detail {
                .financing-list-key {
                    display: inline-block;
                    width: 130px;
                    text-align: right;
                }

                .financing-list-value {
                    font-weight: 800;
                    margin-left: 15px;
                }

            }

            // .financing-list-rowdetail {
            //     display: flex;
            //     justify-content: flex-start;
            //     .financing-list-title {
            //         width: 140px;
            //         text-align: right;
            //     }
            //     .financing-list-value {
            //         font-weight: 800;
            //         margin-left: 15px;
            //     }
            // }

        }
    }
}

//ie select下拉，高度撑不开
// .el-scrollbar__wrap {
//     margin-bottom: 0px !important;
// }

//查看弹出框渲染数据样式
//financing-list-detail 下 左右布局
//financing-list-rowdetail 上下布局
.el-rows {
    width: 100% !important;
    margin: 20px auto 10px;
    text-align: left;

    .financing-list-detail {
        .financing-list-key {
            display: inline-block;
            width: 140px;
            text-align: right;
        }

        .financing-list-value {
            font-weight: 800;
            margin-left: 15px;
        }

    }

    .financing-list-rowdetail {
        display: flex;
        justify-content: flex-start;

        .financing-list-title {
            width: 140px;
            text-align: right;
        }

        .financing-list-blueValue {
            font-weight: 800;
            margin-left: 15px;
            color: #018EDF;
            cursor: pointer;
        }

        .financing-list-value {
            font-weight: 800;
            margin-left: 15px;

        }
    }
}

/*key:value格式   右侧内容自动换行*/
.el-rows-div-spc {
    overflow: hidden;

    .left {
        float: left;
        width: 210px;
        text-align: right;
        color: #606266;
    }

    .right {
        margin-left: 225px;
        font-weight: 800;

        table-layout: fixed;
        word-break: normal;
        overflow: hidden;
    }
}


/* flex */
.flx-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flx-justify-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flx-align-center {
    display: flex;
    align-items: center;
}

/* clearfix */
.clearfix::after {
    display: block;
    height: 0;
    overflow: hidden;
    clear: both;
    content: "";
}

/* 文字单行省略号 */
.sle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 文字多行省略号 */
.mle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 文字多了自動換行 */
.break-word {
    word-break: break-all;
    word-wrap: break-word;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.2s;
}

.fade-transform-enter-from {
    opacity: 0;
    transition: all 0.2s;
    transform: translateX(-30px);
}

.fade-transform-leave-to {
    opacity: 0;
    transition: all 0.2s;
    transform: translateX(30px);
}

/* Breadcrumb */
.breadcrumb-enter-active {
    transition: all 0.2s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
    opacity: 0;
    transform: translateX(10px);
}

/* scroll bar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #d3d3d3;
    border-radius: 20px;
    box-shadow: inset 0 0 0 white;
}

/* nprogress样式 */
#nprogress .bar {
    background: var(--el-color-primary) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--el-color-primary) !important;
    border-left-color: var(--el-color-primary) !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}

/* 外边距、内边距全局样式 */
@for $i from 0 through 40 {
    .mt#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml#{$i} {
        margin-left: #{$i}px !important;
    }

    .pt#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl#{$i} {
        padding-left: #{$i}px !important;
    }
}